<template>
    <div class="Release" :style="ReleaseS">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="Release"></i>
            <span></span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="Agency-center">
            <div class="AgencyCbox">
                <div class="AgencyMargin">
                    <!-- <P>提交表单等待联系，或直接拨打电话：13145658502</P> -->
                    <div class="principal">
                        <span class="fuzeren1">区域负责人</span>
                        <span @click="showModal" class="fuzeren2">
                            <span>{{prinName}}</span>
                            <span>{{prinTel}}</span>
                        </span>
                        <span @click="showModal" class="fuzeren3">
                            <img src="../assets/invite/rightImage.png" alt="">
                        </span>
                       
                    </div>
                    <div class="message">
                        <span>姓名</span>
                        <input type="text" placeholder="请输入你的名字" v-model="issuerName">
                    </div>
                    <div class="message">
                        <span>联系电话</span>
                         <input type="tel" v-model="issuerphone" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入你的电话号码">
                    </div>
                    <div class="agency">
                        <span>您的需求</span>
                        <div class="Release-Text">
                            <textarea autofocus rows="0" cols="value" placeholder="请说明您的需求" maxlength="500" v-model="textName">{{textName}}</textarea>
                            <span>{{figure}}/500</span>
                        </div>
                    </div>
                    <div class="box-buttom">
                        <button @click="submitBtn">提交</button>
                    </div>
                </div>
                <div class="ModelBox" v-show="ModelS">
                    <div class="ModelBox-center">
                        <p>选择负责人</p>
                        <div class="ModelBox-van">
                            <!-- <van-picker class="ModelBox-S" :columns="columns" @change="onChange" :default-index="2" :item-height="25" :visible-item-count="5"/> -->
                            <ul>
                                <li v-for="(item,index) in principalList" :key="index" @click="getPrincipalId(item.userId,item.userName,item.resellerTel)">
                                    <span>{{item.userName}}</span>
                                    <span>{{item.resellerTel}}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="modelButton">
                            <button @click="clode">确定</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
           <!-- 身份认证弹窗 -->
        <div class="showModel" v-show="showModelA">
                <div class="showBox">
                    <div class="one">
                        <!-- <i class="iconfont iconshanchuguanbicha" @click="closeShowModel"></i> -->
                    </div>
                    <div class="two">{{authentication}}</div>
                    <div class="three">
                        <img src="../assets/task/shnefen.png" alt />
                    </div>
                    <div class="four" @click="goRealName" v-show="Noauthentication">立即认证</div>
                </div>
        </div>
    </div>
</template>
<script>
import { Picker,Toast } from 'vant';
export default {
    data() {
        return {
            ReleaseS:{
                height: "100vh",
                backgroundSize: "100% 100vh",
            },
            ReleaseH:"",
            ModelS:false,
            columns: ['白双 13705789520', '李璐 13705789520', '叶筱筱 13615789520', '李话璐 13705705520', '聂松 13105789520'],
            agent:"叶筱筱 13615789520",
            agentS:"",
            issuerName:'',//发布人姓名
            issuerphone:'',//发布人电话
            textName:"",//您的需求
            latiName:localStorage.getItem("latiName"),//获取经纬度
            longName:localStorage.getItem("longName"),//获取经纬度
            principalList:[],//区域负责人列表
            prinName:"",//区域负责人名字
            prinTel:"",//区域负责人电话
            prinId:'',//区域负责人id
             showModelA: false,
             authentication: "身份认证",
              Noauthentication: true,

        }
    },
    mounted() {
        //监听浏览器返回事件
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        //监听手机屏幕的高度
        this.ReleaseH = window.screen.height 
        window.onresize = ()=>{ 
            var Height = document.documentElement.clientHeight || document.body.clientHeight
            var SS = Height*2/100
            if(SS < 9.6){
                var HH = String(this.ReleaseH*2/100);
                this.ReleaseS.height = HH+"rem";
                this.ReleaseS.backgroundSize = "100%"+ " " + HH+"rem";
            }
            else{
                this.ReleaseS.height = "100vh";
                this.ReleaseS.backgroundSize = "100% 100vh";
            }
        }  
    },
    computed:{
        figure(){
            return this.textName.length;
        }
    },
    created (){
       
        this.openShowModel();
        this.getFunctionaryInfo();

    },
    destroyed() {
         // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    methods: {
        
         openShowModel() {
            var MyuserId = JSON.parse(localStorage.getItem("key")).userId;
            this.$axios
              .get("/user/auth/selectAuthUId?id=" +MyuserId)
              .then(res => {
                console.log("审核状态",res);
                if (res.data.code == 0) {
                  if (res.data.data == 0) {
                    this.showModelA = true;
                    this.authentication = "正在审核中";
                    this.Noauthentication = false;
                    // Toast("正在实名制认证审核中")
                  } else if (res.data.data == 2 || res.data.data == 4) {
                    this.showModelA = true;
                    this.authentication = "身份认证";
                    this.Noauthentication = true;
                    // Toast("请提交实名制认证")
                  } else {
                    this.$router.push('/FeedOPen');
                  }
                }
              });
          },
        Release(){
           this.$router.go(-1)
        },
        goBack(){
           this.$router.push("/partTime")
        },
        
        showModal(){
            this.ModelS = true;
        },
        onChange(picker, value, index) {
           this.agentS = value;
        //    Toast(`当前值：${value}, 当前索引：${index},当前索引picker：${picker}`);
        },
        clode(){
            this.ModelS = false;
            if(this.agentS == ""){
                this.agent = "叶筱筱 13615789520"
            }
            else{
                this.agent = this.agentS
            }
            
        },
        //确定提交按钮发布任务
        submitBtn (){
            if(this.issuerName==''){
                Toast("请输入姓名")
            }else if(this.issuerphone==''){
                Toast("请输入电话")
            }else if(this.textName==''){
                Toast("请填写您的需求")
            }else{
                this.$axios.post("/cct/publish/push",{
                    agencyId: this.prinId,//区域代理商id long
                    agencyName:this.prinName,// 代理商姓名, string
                    userRealname:this.issuerName,//用户真实姓名,
                    userTel:this.issuerphone,//用户电话
                    jobDir:this.textName,//工作描述

                }).then(res =>{
                    console.log("任务提交",res)
                    if(res.data.code==0){
                        this.$router.go(-1);
                        Toast(res.data.msg)
                    }else{
                        Toast(res.data.message)
                    }
                    
                })
            }
        },
        //获取附近区域负责人名字及电话
        getFunctionaryInfo (){
            this.$axios.post('/cct/num/findAgency',{
                resellerLng:this.longName,
                resellerLat:this.latiName
            }).then(res =>{
                console.log("获取附近区域联系人",res)
                if(res.data.code==0){
                    this.principalList =res.data.rows;
                    for(var i=0;i<res.data.rows.length;i++){
                        this.prinName= res.data.rows[0].userName;
                        this.prinTel= res.data.rows[0].resellerTel;
                        this.prinId =res.data.rows[0].userId;
                    }
                }
            })
        },
        //获取区域负责人id
        getPrincipalId(val,name,tel){
            this.prinName=name;
            this.prinTel =tel;
            this.ModelS=false;
            this.prinId =val;
        },
         //实名认证
        goRealName() {
        this.$router.push({
            path: "/Autonym",
            query: { theme: "实名认证", url: "/index" }
        });
        },

    },
}
</script>
<style lang="less" scoped>
html,body{
    width: 100%;
    height: 100%;
}
.Release{
    width: 100%;
    max-height:  100%;
    background-color: #f8f8f8;
    background-image: url("../assets/invite/Release.png");
    -webkit-background-size: cover;
    font-size: 0;
    .title{
        width: 100%;
        font-size: 0.36rem;
        color:#FFFFFF;
        height: 1.25rem;
        line-height: 1.25rem;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
    }
    .Agency-center{
        width:100%;
        height:8.5rem;
        margin-top:3rem;
        .AgencyCbox{
            width:6.9rem;
            height:8.5rem;
            background-color:#FFFFFF;
            margin: 0 auto;
            border-radius:0.16rem;
            .AgencyMargin{
                width:6.42rem;
                height:8.5rem;
                margin: 0 auto;
                border: 0.1px solid #FFFFFF;
                
                .principal{
                    width:6.42rem;
                    height:0.7rem;
                    margin-top:0.3rem;
                    line-height:0.7rem;
                    display:flex;
                    border-bottom:0.01rem solid #F8F8F8;
                    span{
                        font-size:0.26rem;
                        font-family:"PingFang-SC-Medium";
                        font-weight: bold;
                        color:#333333;
                        display:block;
                        height:0.7rem;
                     &.fuzeren1{
                        width:2rem;
                      }
                       &.fuzeren2{
                        width:4rem;
                        display: flex;
                        justify-content: flex-start;
                         span{
                                font-size: 0.26rem;
                                color:#333;
                                &:nth-child(1){
                                    margin-right: 0.25rem;    
                                }
                            }
                      }
                        &.fuzeren3{
                            width:0.3rem;
                            img{
                                width: 0.14rem;
                                height: 0.24rem;
                            }
                        }
                       
                    }
                   
                }
                .message{
                    width:6.42rem;
                    height:0.7rem;
                    margin-top:0.3rem;
                    line-height:0.7rem;
                    display:flex;
                    border-bottom:0.01rem solid #F8F8F8;
                    span{
                        font-size:0.26rem;
                        font-family:"PingFang-SC-Medium";
                        font-weight: bold;
                        color:#333333;
                        vertical-align:top;
                        display:block;
                        width:2rem;
                        height:0.7rem;
                    }
                    input{
                        font-size:0.26rem;
                        color:#999999;
                        font-family:"PingFang-SC-Medium";
                        font-weight: Medium;
                    }
                    button{
                        font-size:0.36rem;
                        color:#FFFFFF;
                        background-color:#38A83F;
                        width:4.9rem;
                        height:0.8rem;
                        border-radius:0.1rem;
                        margin: 1rem auto;

                    }
                }
                .agency{
                    width:6.42rem;
                    height:0.7rem;
                    margin-top:0.3rem;
                    line-height:0.7rem;
                    span{
                        font-size:0.26rem;
                        font-family:"PingFang-SC-Medium";
                        font-weight: bold;
                        color:#333333;
                        vertical-align:top;
                        display:block;
                        height:0.7rem;
                    }
                    .Release-Text{
                        width:6.42rem;
                        height: 2.2rem;
                        margin: 0rem auto;
                        position: relative;
                        textarea{
                            color: #333;
                            font-size: 0.26rem;
                            width: 100%;
                            height: 2.2rem;
                            background: #F8F8F8;
                            resize: none;
                        }
                        span{
                        position: absolute;
                        top:1.6rem;
                        left:5.65rem;
                        font-size: 0.22rem;
                        color: #C3C3C3;
                        }
                    }
                }
                .box-buttom{
                    width:6.42rem;
                    height:0.8rem;
                    margin-top:3rem;
                    line-height:0.8rem;
                    border-bottom:0.01rem solid #FFFFFF;
                    button{
                        font-size:0.36rem;
                        color:#FFFFFF;
                        background-color:#38A83F;
                        width:4.9rem;
                        height:0.8rem;
                        border-radius:0.1rem;
                        margin-left: 0.76rem;

                    }
                }
            }
        }
    }
    .ModelBox{
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0rem;
        left: 0rem;
        background: rgba(0, 0, 0, 0.4);
        .ModelBox-center{
            width: 5.1rem;
            height: 4.79rem;
            background: #FFFFFF;
            margin: 4.5rem auto;
            border-radius: 0.1rem;
            p{
                width: 100%;
                height: 1.3rem;
                font-size: 0.34rem;
                color: #333333;
                font-weight: 520;
                line-height: 1.3rem;
                text-align: center;
                font-family: "PingFang-SC-Medium";
            }
            .ModelBox-van{
                width: 100%;
                height: 2.5rem;
                .ModelBox-S{
                    font-size: 0.24rem !important;
                    line-height: 0.25rem !important;
                }
                ul{
                    width: 100%;
                    height: 100%;
                    overflow-y: scroll;
                    li{
                        width:100%;
                        padding:0.1rem 0.2rem;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 0.24rem;
                        color:#333;
                        span{
                            &:nth-child(1){
                                margin-right: 0.15rem;
                            }
                        }
                    }
                }
            }
            .modelButton{
                width: 100%;
                text-align: center;
                margin-top: 0.35rem;
            }
            button{
                font-size:0.28rem;
                color:#38A83F;
                background: #FFFFFF;
               
            }
        }
    }
     // 身份认证
  .showModel {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 5;
    .showBox {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      margin-top: 3rem;
      background-color: #fff;
      width: 5.75rem;
      height: 5.32rem;
      border-radius: 0.2rem;
      padding: 0.15rem 0.2rem;
      box-sizing: border-box;
      font-size: 0.26rem;
      .one {
        text-align: right;
        i {
          font-size: 0.3rem;
        }
      }
      .two {
        text-align: center;
        margin-top: 0.2rem;
        font-size: 0.36rem;
        color: #333333;
        font-weight: R;
      }
      .three {
        width: 2.04rem;
        height: 2.04rem;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 0.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .four {
        margin: 0 auto;
        width: 3.41rem;
        height: 0.65rem;
        line-height: 0.65rem;
        text-align: center;
        color: #fff;
        font-size: 0.32rem;
        background: rgba(56, 168, 63, 1);
        border-radius: 0.33rem;
        margin-top: 0.45rem;
      }
    }
  }
}
</style>